/*flexbox的前端布局框架，兼容IE10以上浏览器，IE10以下浏览器需要使用flexible.js实现*/

/*2015年3月7日 mooshroom*/

/*************************排列方向*************************/
.box-row,.box-col,.box-row-rev,.box-col-rev{
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.box-row{
    /*横向排列*/
    -webkit-flex-direction:row;
    flex-direction:row;

}
.box-row-rev{
    /*横向反转*/
    -webkit-flex-direction:row-reverse;
    flex-direction:row-reverse;

}
.box-col{
    /*竖向排列*/
    -webkit-flex-direction:column;
    flex-direction:column;

}
.box-col-rev{
    /*竖向反转*/
    -webkit-flex-direction:column-reverse;
    flex-direction:column-reverse;

}


/*************************行对齐方式*************************/
.row-top{
    /*靠顶部对齐*/
    -webkit-align-content:flex-start;
    align-content:flex-start;
}
.row-center{
    /*靠中间对齐*/
    -webkit-align-content:center;
    align-content:center;
}
.row-bottom{
    /*靠底部对齐*/
    -webkit-align-content:flex-end;
    align-content:flex-end;
}
.row-ends{
    /*以两头为基准均匀分布*/
    -webkit-align-content:space-between;
    align-content:space-between;
}
.row-aver{
    /*均匀分布*/
    -webkit-align-content:space-around;
    align-content:space-around;
}
.row-same{
    /*每一行高度一致*/
    -webkit-align-content:strecth;
    align-content:strecth;
}


/*************************水平对齐方式*************************/
.hor-first{
    /*以头为基准靠齐*/
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
}
.hor-last{
    /*以最后一个为基准靠齐*/
    -webkit-justify-content:flex-end;
    justify-content:flex-end;
}
.hor-center{
    /*以中间为基准靠齐*/
    -webkit-justify-content:center;
    justify-content:center;
}
.hor-ends{
    /*已两头为基准均匀分布*/
    -webkit-justify-content:space-between;
    justify-content:space-between;
}
.hor-aver{
    /*均匀分布*/
    -webkit-justify-content:space-around;
    justify-content:space-around;
}

/*************************垂直对齐方式*************************/
.ver-top{
    /*顶部对齐*/
    -webkit-align-items:flex-start;
    align-items:flex-start;
}
.ver-bottom{
    /*底部对齐*/
    -webkit-align-items:flex-end;
    align-items:flex-end;
}
.ver-center{
    /*居中对齐*/
    -webkit-align-items:center;
    align-items:center;
}
.ver-baseline{
    /*基准线对齐*/
    -webkit-align-items:baseline;
    align-items:baseline;
}
.ver-same{
    /*强制高度相等*/
    -webkit-align-items:strecth;
    align-items:strecth;
}


/*************************个性对齐方式*************************/
.change-auto{
    /*自动根据父元素变节奏*/
    -webkit-align-self: auto;
    align-self: auto;
}
.change-top{
     /*靠顶部*/
    -webkit-align-self: flex-start;
    align-self: flex-start;
 }
.change-bottom{
    /*靠底部*/
    -webkit-align-self: flex-end;
    align-self: flex-end;
}
.change-center{
    /*靠中间*/
    -webkit-align-self: center;
    align-self: center;
}
.change-baseline{
    /*靠基线*/
    -webkit-align-self: baseline;
    align-self: baseline;
}
.change-stretch{
    /*根据父元素拉伸*/
    -webkit-align-self: stretch;
    align-self: stretch;
}
/*************************换行*************************/
.warp{
    /*换行*/
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;

}
.nowarp{
    /*不换行*/

    -webkit-flex-wrap:nowrap;
    flex-wrap:nowrap;
}